<template>
  <div class="content">
    <div class="content_top">
      <div>
        <p>计划改造项目数</p>
        <p>
          <span class="number">
            <!-- 5000 -->
            <countTo :endVal="5000" />
          </span>个
        </p>
      </div>
      <div>
        <p>实际完成项目数</p>
        <p>
          <span class="number">
            <!-- 4000 -->
            <countTo :endVal="4000" />
          </span>个
        </p>
      </div>
      <div>
        <p>完成百分比</p>
        <p>
          <span class="number">
            <!-- 80.00 -->
            <countTo :endVal="80.00" />
          </span>%
        </p>
      </div>
    </div>
    <div class="content_bottom">
      <div>
        <div class="chart">
          <div class="text">
            <p class="number">
              <!-- 5000 -->
              <countTo :endVal="5000" />
            </p>
            <p>2020年计划值</p>
          </div>
          <PieChart style="width:11.3rem;height:11.3rem;" :id="year+'PieChart1'" :data="data1" />
        </div>
        <div class="text">
          <p>
            <span>
              <span class="legend BFF"></span>新开工项目数
            </span>
            <span class="number">
              <!-- 1000 -->
              <countTo :endVal="1000" />
            </span>
            <span>个</span>
          </p>
          <p>
            <span>
              <span class="legend B9"></span>在建项目数
            </span>
            <span class="number">
              <!-- 1600 -->
              <countTo :endVal="1600" />
            </span>
            <span>个</span>
          </p>
          <p>
            <span>
              <span class="legend F8"></span>竣工项目数
            </span>
            <span class="number">
              <!-- 1000 -->
              <countTo :endVal="1000" />
            </span>
            <span>个</span>
          </p>
          <p>
            <span>
              <span class="legend FF"></span>已交付项目数
            </span>
            <span class="number">
              <!-- 1400 -->
              <countTo :endVal="1400" />
            </span>
            <span>个</span>
          </p>
        </div>
      </div>
      <div>
        <div class="chart">
          <div class="text">
            <p class="number">
              <!-- 9000 -->
              <countTo :endVal="9000" />
            </p>
            <p>2019年完成数</p>
          </div>
          <PieChart style="width:11.3rem;height:11.3rem;" :id="year+'PieChart2'" :data="data2" />
        </div>
        <div class="text">
          <p>
            <span>
              <span class="legend F64"></span>新开工面积
            </span>
            <span class="number">
              <!-- 2000 -->
              <countTo :endVal="2000" />
            </span>
            <span>万m²</span>
          </p>
          <p>
            <span>
              <span class="legend B33A"></span>在建项面积
            </span>
            <span class="number">
              <!-- 2600 -->
              <countTo :endVal="2600" />
            </span>
            <span>万m²</span>
          </p>
          <p>
            <span>
              <span class="legend D4F8"></span>竣工面积
            </span>
            <span class="number">
              <!-- 2000 -->
              <countTo :endVal="2000" />
            </span>
            <span>万m²</span>
          </p>
          <p>
            <span>
              <span class="legend FF"></span>已交付面积
            </span>
            <span class="number">
              <!-- 2400 -->
              <countTo :endVal="2400" />
            </span>
            <span>万m²</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "./pieChart";
export default {
  name: "Renovation",
  components: {
    PieChart
  },
  props: ["year"],
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const { year } = this;
      this.http
        .post("", {
          path: "st",
          groupid: 23,
          year: year
        })
        .then(res => {
          console.log("棚户区改造data:" + res.data);
        });
    }
  },
  data: () => {
    return {
      fdc_zfbz_phqgz_jhgzxms: 0, //计划改造项目数
      fdc_zfbz_phqgz_sjwcxms: 0, //实际完成项目数
      fdc_zfbz_phqgz_wcbfb: 0, //完成百分比(%)
      data1: {
        color: ["#2BB7FF", "#60BFB9", "#BBD4F8", "#FFFFFF"],
        data: [
          { value: 1000, name: "新开工项目数" }, //fdc_zfbz_phqgz_xkgxms
          { value: 1600, name: "在建项目数" }, //fdc_zfbz_phqgz_zjxms
          { value: 1000, name: "竣工项目数" }, //fdc_zfbz_phqgz_jgxms
          { value: 1400, name: "已交付项目数" } //fdc_zfbz_phqgz_yjfxms
        ]
      },
      data2: {
        color: ["#D94F64", "#FCB33A", "#BBD4F8", "#FFFFFF"],
        data: [
          { value: 2000, name: "新开工面积" }, //fdc_zfbz_phqgz_xkgmj
          { value: 2600, name: "在建面积" }, //fdc_zfbz_phqgz_zjmj
          { value: 2000, name: "竣工面积" }, //fdc_zfbz_phqgz_jgmj
          { value: 2400, name: "已交付面积" } //fdc_zfbz_phqgz_yjfmj
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 45.87rem;
  padding: 4rem 1.5rem 0;
  .content_top {
    padding-bottom: 2rem;
    border-bottom: 1px solid #00ecff4d;
    display: none;
    > div {
      color: #bed7fa;
      display: inline-block;
      width: 33%;
      font-size: 1.077rem;
      box-sizing: border-box;
      &:nth-of-type(2) {
        border: 1px solid #00ecff4d;
        border-top: 0;
        border-bottom: 0;
        padding-left: 3.5rem;
      }
      &:last-of-type {
        padding-left: 3.5rem;
      }
      .number {
        font-size: 1.846rem;
        line-height: 1.5em;
        color: #fff;
      }
    }
  }
  .BFF {
    background: #2bb7ff;
  }
  .B9 {
    background: #60bfb9;
  }
  .F8 {
    background: #bbd4f8;
  }
  .FF {
    background: #fff;
  }
  .F64 {
    background: #d94f64;
  }
  .B33A {
    background: #fcb33a;
  }
  .D4F8 {
    background: #bbd4f8;
  }
  .content_bottom {
    width: 100%;
    height: 34rem;
    padding: 0 1rem;
    > div {
      height: 50%;
      display: flex;
      align-items: center;
      .chart {
        width: 11.3rem;
        height: 11.3rem;
        margin-right: 5rem;
        position: relative;
        .text {
          position: absolute;
          top: 50%;
          font-size: 1.23rem;
          color: #a8c3ea;
          transform: translateY(-50%);
          width: 100%;
          text-align: center;
          .number {
            font-size: 1.85rem;
            line-height: 2em;
            color: #fff;
          }
        }
      }
      > .text {
        flex: 1;
        p {
          font-size: 1.23rem;
          color: #a8c3ea;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > span {
            &:first-of-type {
              width: 10rem;
            }
          }
          .legend {
            display: inline-block;
            width: 0.7rem;
            height: 0.7rem;
            margin-right: 1.5rem;
          }
          .number {
            font-size: 1.85rem;
            line-height: 2em;
            letter-spacing: 0.0412em;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>